.warehouse-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;

  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }
}

// 表单重构样式
.plan-form-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);

  .form-section {
    .form-row {
      display: flex;
      gap: 20rpx;
      margin-bottom: 35rpx;

      .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;

        .form-label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          font-weight: 500;

          &.required::before {
            content: '*';
            color: #ff4d4f;
            margin-right: 4rpx;
          }
        }

        .form-picker {
          background: #f8f9fa;
          border: 2rpx solid #e9ecef;
          border-radius: 12rpx;
          padding: 20rpx;
          font-size: 28rpx;
          color: #495057;
          transition: all 0.3s ease;

          &:hover {
            border-color: #667eea;
            background: #fff;
          }

          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }

          .picker-content {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .picker-arrow {
              color: #6c757d;
              font-size: 24rpx;
            }
          }
        }

        .form-input {
          background: #f8f9fa;
          border: 2rpx solid #e9ecef;
          border-radius: 12rpx;
          padding: 24rpx 20rpx;
          font-size: 28rpx;
          color: #495057;
          transition: all 0.3s ease;
          min-height: 80rpx;
          display: flex;
          align-items: center;

          &:focus {
            border-color: #667eea;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
            outline: none;
            box-shadow: 
              0 6rpx 20rpx rgba(102, 126, 234, 0.2),
              inset 0 1rpx 3rpx rgba(255, 255, 255, 0.9);
            transform: translateY(-3rpx);
          }

          &:disabled {
            background: #e9ecef !important;
            color: #6c757d !important;
            border-color: #ced4da !important;
            opacity: 0.7;
            cursor: not-allowed;
          }

          &.error-input {
            border-color: #ff4d4f;
            background: #fff5f5;
          }

          &::placeholder {
            color: #adb5bd;
          }
        }
      }
    }

    .button-row {
      display: flex;
      gap: 20rpx;
      margin-top: 30rpx;
      margin-bottom: 0;

      .btn-submit {
        @extend .btn-base;
        @extend .btn-xl;
        @extend .btn-primary;
        flex: 1;
        
        &:hover:not(:disabled) {
          border-color: #bdc3c7;
          box-shadow: 
            0 6rpx 16rpx rgba(0, 0, 0, 0.1),
            inset 0 1rpx 3rpx rgba(255, 255, 255, 0.9);
          transform: translateY(-1rpx);
        }
      }

      .btn-reset {
        @extend .btn-base;
        @extend .btn-xl;
        flex: 1;
        background: #6c757d;
        color: #fff;
        
        &:hover {
          background: #5a6268;
          transform: translateY(-2rpx);
          box-shadow: 0 8rpx 24rpx rgba(108, 117, 125, 0.3);
        }
      }
    }
  }

  .plan-list-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
    padding-top: 30rpx;
    border-top: 2rpx solid #e9ecef;

    .nav-btn {
    @extend .btn-base;
    @extend .btn-md;
    background: #e9ecef;
    color: #495057;
    
    &:hover:not(:disabled) {
      background: #dee2e6;
    }
  }

    .nav-text {
      font-size: 28rpx;
      color: #6c757d;
      font-weight: 500;
    }
  }
}

// 入库类型标签页样式
.in-type-tabs {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 4px;
  margin: 15px 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: 6px;
  background-color: transparent;
  transition: all 0.3s ease;
  cursor: pointer;

  &.active {
    background-color: #007aff;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
  }

  &:not(.active):hover {
    background-color: #e8e8e8;
  }
}

.tab-text {
  font-size: 14px;
  font-weight: 500;

  .tab-item.active & {
    color: white;
  }
}

// 选中表格高亮样式
.selected-table {
  border: 2px solid #4caf50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.info-section,
.search-section,
.material-section,
.statistics-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  padding-bottom: 15rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .time-filter-buttons {
    display: flex;
    gap: 15rpx;

    .filter-btn {
      padding: 10rpx 20rpx;
      border: 2rpx solid #e0e0e0;
      background: #fff;
      border-radius: 20rpx;
      font-size: 24rpx;
      color: #666;
      transition: all 0.3s ease;

      &.active {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        border-color: #667eea;
      }

      &:hover {
        transform: translateY(-2rpx);
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      }
    }

    .btn-match-contract {
      background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
      color: #fff;
      border: none;
      padding: 10rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-left: 15rpx;

      &:hover {
        transform: translateY(-2rpx);
        box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
      }
    }
  }
}

.info-form {
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .form-label {
      width: 160rpx;
      font-size: 28rpx;
      color: #666;
    }

    .form-picker,
    .warehouse-display {
      flex: 1;
      padding: 15rpx;
      background: #f8f9fa;
      border-radius: 10rpx;
      font-size: 28rpx;
    }

    .picker-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .picker-arrow {
      color: #999;
    }
  }
}

.search-form {
  .search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    align-items: flex-end;

    .search-item {
      flex: 1;
      min-width: 200rpx;

      .search-label {
        display: block;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .search-input,
      .search-picker {
        width: 100%;
        padding: 15rpx;
        background: #f8f9fa;
        border-radius: 10rpx;
        font-size: 28rpx;
      }
    }

    .search-buttons {
      display: flex;
      gap: 15rpx;

      .btn-reset,
      .btn-search {
        padding: 15rpx 30rpx;
        border-radius: 25rpx;
        font-size: 28rpx;
        border: none;
      }

      .btn-reset {
        background: #e9ecef;
        color: #6c757d;
      }

      .btn-search {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
      }
    }
  }
}

.contract-table-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .table-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .contract-table {
    .table-row {
      display: flex;
      align-items: center;
      padding: 8rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      transition: all 0.3s ease;
      min-height: 50rpx;

      &.header {
        background: #f8f9fa;
        font-weight: 600;
        color: #495057;
        border-radius: 8rpx;
        margin-bottom: 8rpx;
        padding: 12rpx 0;
      }

      &:hover {
        background: #f8f9fa;
        cursor: pointer;
      }

      &.selected {
        background-color: #90EE90 !important;  /* 浅绿色背景 */
        border-left: 6rpx solid #228B22;
        box-shadow: 0 4rpx 12rpx rgba(34, 139, 34, 0.3);
        transform: translateX(4rpx);
      }

      &:active {
        background-color: #f0f0f0;
      }

      .table-cell {
        flex: 1;
        text-align: center;
        font-size: 24rpx;
        color: #333;
        padding: 0 6rpx;
        word-break: break-all;

        &:first-child {
          flex: 1.5;
        }

        &:nth-child(2) {
          flex: 1.2;
        }
      }
    }

    .table-scroll {
      max-height: 400rpx;
    }
  }

  // 物料编码筛选样式
  // 物料输入框和查询按钮样式（保持一行显示）
  .material-input {
    height: 70rpx;
    padding: 0 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 220rpx); // 缩短宽度，为按钮留出更多空间
    margin-right: 20rpx;
    
    &:focus {
      border-color: #4caf50;
      outline: none;
    }
    
    &:disabled {
      background: #f5f5f5;
      color: #999;
    }
  }

  .scan-btn {
    height: 70rpx;
    padding: 0 30rpx;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 10rpx;
    font-size: 28rpx;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    
    &:active {
      background: #45a049;
    }
  }

  // 表格横向滚动容器
  .table-scroll-container {
    position: relative;
    overflow: hidden;
    border-radius: 12rpx;
    background: #fff;
    
    .table-scroll-wrapper {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch; // 启用触摸滚动
      scrollbar-width: thin; // Firefox
      
      &::-webkit-scrollbar {
        height: 6rpx;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3rpx;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3rpx;
        
        &:hover {
          background: #a8a8a8;
        }
      }
      
      .table-content {
        min-width: 1200rpx; // 设置最小宽度以支持横向滚动
        
        .table-row {
          display: flex;
          align-items: center;
          min-height: 80rpx;
          border-bottom: 1rpx solid #f0f0f0;
          transition: all 0.3s ease;
          
          &.header {
            background: #f8f9fa;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
          }
          
          &.selected {
            background-color: #90EE90 !important;
            border-left: 6rpx solid #228B22;
          }
          
          &:hover {
            background: #f8f9fa;
          }
          
          .table-cell {
            flex: 1;
            min-width: 100rpx;
            max-width: 160rpx;
            padding: 12rpx 8rpx;
            text-align: center;
            font-size: 24rpx;
            color: #333;
            word-break: break-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-right: 1rpx solid #f0f0f0;
            
            &:first-child {
              min-width: 80rpx;
              max-width: 100rpx;
              position: sticky;
              left: 0;
              background: inherit;
              z-index: 5;
              border-right: 2rpx solid #e0e0e0;
            }
            
            // 物料名称列（第四列）自适应宽度
            &:nth-child(4) {
              flex: 2.5;
              min-width: 200rpx;
              max-width: none;
              text-align: left;
              text-overflow: unset;
              white-space: normal;
              word-break: break-word;
              line-height: 1.4;
            }
            
            // 规格列（第五列）适度增加宽度
            &:nth-child(5) {
              flex: 1.5;
              min-width: 120rpx;
              max-width: 200rpx;
            }
            
            &:last-child {
              border-right: none;
            }
            
            // 固定列样式
            &.fixed-col {
              position: sticky;
              left: 0;
              background: inherit;
              z-index: 5;
              border-right: 2rpx solid #e0e0e0;
            }
            
            // 选择列固定
            &.select-col {
              min-width: 80rpx;
              max-width: 100rpx;
              position: sticky;
              left: 0;
              background: inherit;
              z-index: 6;
            }
            
            // 操作列固定
            &.action-col {
              min-width: 100rpx;
              max-width: 120rpx;
              position: sticky;
              right: 0;
              background: inherit;
              z-index: 5;
              border-left: 2rpx solid #e0e0e0;
            }
          }
        }
      }
    }
    
    // 滚动提示
    .scroll-hint {
      position: absolute;
      top: 50%;
      right: 10rpx;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      font-size: 20rpx;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 20;
      
      &.show {
        opacity: 1;
      }
      
      .hint-icon {
        display: inline-block;
        margin-right: 6rpx;
        animation: swipeHint 1.5s ease-in-out infinite;
      }
    }
  }

  @keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6rpx); }
  }

  .material-code-filter {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    gap: 20rpx;

    .material-input {
      flex: 1;
      height: 70rpx;
      padding: 0 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 10rpx;
      font-size: 28rpx;
      background: #fff;
      
      &:focus {
        border-color: #4caf50;
        outline: none;
      }
      
      &:disabled {
        background: #f5f5f5;
        color: #999;
      }
    }

    .scan-btn {
      height: 70rpx;
      padding: 0 30rpx;
      background: #4caf50;
      color: white;
      border: none;
      border-radius: 10rpx;
      font-size: 28rpx;
      cursor: pointer;
      
      &:active {
        background: #45a049;
      }
    }
  }

  // 筛选信息行样式
  .filter-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .section-subtitle {
      font-size: 24rpx;
      color: #999;
    }
    
    .input-switch-container {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      .switch-label {
        font-size: 24rpx;
        color: #666;
      }
      
      .custom-switch-wrapper {
        cursor: pointer;
        
        .custom-switch {
          width: 60rpx;
          height: 32rpx;
          background: #ccc;
          border-radius: 16rpx;
          position: relative;
          transition: background 0.3s;
          
          &.custom-switch-active {
            background: #4caf50;
          }
          
          .custom-switch-handle {
            width: 28rpx;
            height: 28rpx;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 2rpx;
            left: 2rpx;
            transition: transform 0.3s;
            
            &.custom-switch-handle-active {
              transform: translateX(28rpx);
            }
          }
        }
      }
    }
  }
}

.weight-table-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);

  .table-header {
    margin-bottom: 20rpx;

    .table-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .weight-table {
    .table-row {
      display: flex;
      align-items: center;
      padding: 8rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      transition: all 0.3s ease;
      min-height: 50rpx;

      &.header {
        background: #f8f9fa;
        font-weight: bold;
        border-radius: 10rpx;
        padding: 12rpx 0;
      }

      &:hover {
        background: #f8f9fa;
        cursor: pointer;
      }

      &.selected {
        background-color: #e8f5e8 !important;
        border-left: 4rpx solid #4caf50;
      }

      &:active {
        background-color: #f0f0f0;
      }

      &:last-child {
        border-bottom: none;
      }

      .table-cell {
        flex: 1;
        text-align: center;
        font-size: 24rpx;
        color: #333;
        padding: 0 6rpx;

        &:first-child {
          flex: 0.6;
        }

        .checkbox {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx solid #ccc;
          border-radius: 4rpx;
          display: inline-block;
          position: relative;
          
          &.checked {
            background-color: #4caf50;
            border-color: #4caf50;
            
            &::after {
              content: '';
              position: absolute;
              left: 8rpx;
              top: 2rpx;
              width: 8rpx;
              height: 16rpx;
              border: solid white;
              border-width: 0 2rpx 2rpx 0;
              transform: rotate(45deg);
            }
          }
        }

        .quantity-input {
          width: 100rpx;
          height: 50rpx;
          padding: 8rpx 12rpx;
          background: #f8f9fa;
          border: 2rpx solid #e0e0e0;
          border-radius: 8rpx;
          font-size: 26rpx;
          font-weight: 500;
          text-align: center;
          
          &:focus {
            border-color: #667eea;
            background: #fff;
            outline: none;
            box-shadow: 0 0 0 3rpx rgba(102, 126, 234, 0.2);
          }
          
          &:disabled {
            background: #e9ecef;
            color: #6c757d;
            border-color: #ced4da;
            opacity: 0.6;
            cursor: not-allowed;
          }
          
          &::placeholder {
            color: #999;
            font-size: 26rpx;
          }
        }
      }
    }

    .table-scroll {
      max-height: 300rpx;
    }
  }

  .load-more-btn {
    width: 100%;
    padding: 20rpx;
    margin-top: 20rpx;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 10rpx;
    font-size: 26rpx;
    color: #495057;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #e9ecef;
      border-color: #adb5bd;
    }

    &:active {
      background: #dee2e6;
    }
  }
}

// 称重入库物料表样式
.material-table-section {
  margin: 20rpx 0;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .weight-table {
    .table-row {
      .table-cell {
        padding: 24rpx 20rpx;
        
        .large-input {
          width: 100%;
          height: 60rpx;
          padding: 12rpx 16rpx;
          font-size: 28rpx;
          font-weight: 600;
          border: 2rpx solid #e0e0e0;
          border-radius: 10rpx;
          background: #fff;
          text-align: center;
          transition: all 0.3s ease;
          
          &:focus {
            border-color: #667eea;
            background: #f8f9ff;
            box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.2);
            transform: scale(1.02);
          }
          
          &:disabled {
            background: #e9ecef;
            color: #6c757d;
            border-color: #ced4da;
            opacity: 0.6;
            cursor: not-allowed;
          }
          
          &::placeholder {
            color: #999;
            font-size: 28rpx;
            font-weight: normal;
          }
        }
        
        .btn-delete {
          padding: 12rpx 20rpx;
          font-size: 22rpx;
          border-radius: 6rpx;
          background: #ff4757;
          color: #fff;
          border: none;
          min-width: 70rpx;
          
          &:active {
            background: #ff3742;
            transform: scale(0.98);
          }
        }
      }
    }
  }
}

.document-list {
  max-height: 400rpx;
  overflow: hidden;

  .list-header {
    margin-bottom: 20rpx;

    .list-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .document-scroll {
    max-height: 300rpx;
  }

  .document-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .document-info {
      flex: 1;

      .document-title {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 5rpx;
      }

      .document-subtitle {
        font-size: 24rpx;
        color: #999;
      }
    }

    .document-date {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.empty-state {
  text-align: center;
  padding: 60rpx 0;

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.material-list {
  .table-header-row {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 10rpx;
    margin-bottom: 10rpx;

    .header-cell {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      font-weight: bold;
      color: #333;

      &.fixed-col {
        width: 120rpx;
        min-width: 120rpx;
        max-width: 120rpx;
      }
    }
  }

  .material-scroll {
    width: 100%;
    overflow-x: auto;
  }

  .material-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    min-width: 600rpx;

    &:last-child {
      border-bottom: none;
    }

    .fixed-inputs {
      display: flex;
      width: 240rpx;

      .weight-input,
      .quantity-input {
        width: 120rpx;
        padding: 15rpx 10rpx;
        background: #f8f9fa;
        border-radius: 8rpx;
        font-size: 26rpx;
        text-align: center;
        border: 2rpx solid #e0e0e0;

        &:focus {
          border-color: #667eea;
          background: #fff;
        }
      }
    }

    .material-info {
      flex: 1;
      padding: 0 20rpx;

      .material-name {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 5rpx;
      }

      .material-code {
        font-size: 24rpx;
        color: #999;
      }
    }

    .unit-cell {
      width: 80rpx;
      text-align: center;
      font-size: 24rpx;
      color: #666;
    }

    .btn-delete {
      width: 100rpx;
      padding: 15rpx 20rpx;
      background: #dc3545;
      color: #fff;
      border: none;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }
}

.btn-add {
  padding: 10rpx 25rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 25rpx;
  font-size: 26rpx;
}

.statistics-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20rpx 0;

  .stat-item {
    text-align: center;
    padding: 10rpx;

    .stat-label {
      display: block;
      font-size: 24rpx;
      color: #666;
      margin-bottom: 5rpx;
    }

    .stat-value {
      font-size: 32rpx;
      font-weight: bold;
      color: #667eea;
    }

    // 检斤统计信息特殊样式
    &.weigh-stat {
      .stat-label {
        color: #ff9800;
        font-size: 22rpx;
      }
      .stat-value {
        color: #ff9800;
        font-size: 28rpx;
      }
    }
  }
}

.action-bar {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 30rpx 0;

  .action-row {
    display: flex;
    gap: 30rpx;
    
    .btn-reset,
    .btn-submit {
      flex: 1;
      padding: 25rpx;
      border-radius: 50rpx;
      font-size: 30rpx;
      font-weight: bold;
      border: none;
    }
  }

  .btn-reset,
  .btn-submit {
    flex: 1;
    padding: 25rpx;
    border-radius: 50rpx;
    font-size: 30rpx;
    font-weight: bold;
    border: none;
  }

  .btn-reset {
    @extend .btn-base;
    @extend .btn-xl;
    flex: 1;
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    color: #6c757d;
    margin: 0 16rpx;
    
    &:hover {
      background: linear-gradient(135deg, #dee2e6, #ced4da);
      transform: translateY(-2rpx);
      box-shadow: 0 6rpx 16rpx rgba(233, 236, 239, 0.4);
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: 0 2rpx 8rpx rgba(233, 236, 239, 0.3);
    }
  }

.btn-submit {
  @extend .btn-base;
  @extend .btn-xl;
  flex: 1;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.4);
  }
  
  &:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
  }
  
  &:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
  }
}
}

@media (max-width: 768rpx) {
  .search-row {
    flex-direction: column;

    .search-item {
      width: 100%;
    }

    .search-buttons {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .material-item {
    flex-direction: column;
    align-items: flex-start;

    .material-info,
    .material-input,
    .material-weight {
      width: 100%;
      margin: 10rpx 0;
    }
  }
  
  /* 按钮组在小屏幕下的自适应 */
  .button-row {
    gap: 15rpx;
    
    .btn-submit,
    .btn-reset {
      font-size: 26rpx;
      padding: 20rpx 28rpx;
    }
  }
  
  .btn-group {
    gap: 12rpx;
    
    &.btn-group-responsive {
      flex-direction: column;
      
      .btn-flex {
        width: 100%;
      }
    }
  }
}

/* ===== 按钮自适应系统 ===== */

/* 基础按钮样式 - 统一的设计系统 */
.btn-base {
  border: none;
  border-radius: 12rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  
  &:active:not(:disabled) {
    transform: scale(0.98);
  }
}

/* 按钮尺寸变体 */
.btn-sm {
  padding: 12rpx 20rpx;
  font-size: 24rpx;
  min-height: 48rpx;
}

.btn-md {
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  min-height: 56rpx;
}

.btn-lg {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  min-height: 64rpx;
}

.btn-xl {
  padding: 24rpx 36rpx;
  font-size: 30rpx;
  min-height: 72rpx;
}

/* 按钮颜色变体 */
.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #ffffff;
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
  }
  
  &:disabled {
    background: #e9ecef;
    color: #6c757d;
    border-color: #ced4da;
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.btn-success {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: #ffffff;
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838, #1e7e34);
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

.btn-warning {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: #ffffff;
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

.btn-danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: #ffffff;
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #c82333, #bd2130);
    transform: translateY(-1rpx);
    box-shadow: 0 4rpx 8rpx rgba(220, 53, 69, 0.25);
  }
}

.btn-default {
  background: #e9ecef;
  color: #495057;
  
  &:hover:not(:disabled) {
    background: #dee2e6;
  }
}

/* 按钮布局变体 */
.btn-block {
  width: 100%;
  display: flex;
}

.btn-flex {
  flex: 1;
  min-width: 0;
}

/* 响应式按钮系统 */
@media (max-width: 1200px) {
  .btn-xl {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
  }
}

@media (max-width: 992px) {
  .btn-lg {
    padding: 18rpx 28rpx;
    font-size: 26rpx;
  }
  
  .btn-xl {
    padding: 18rpx 28rpx;
    font-size: 26rpx;
  }
}

@media (max-width: 768px) {
  .btn-sm {
    padding: 10rpx 16rpx;
    font-size: 22rpx;
  }
  
  .btn-md {
    padding: 14rpx 20rpx;
    font-size: 24rpx;
  }
  
  .btn-lg {
    padding: 16rpx 24rpx;
    font-size: 24rpx;
  }
  
  .btn-xl {
    padding: 16rpx 24rpx;
    font-size: 24rpx;
  }
}

@media (max-width: 576px) {
  .btn-group-responsive {
    flex-direction: column;
    
    .btn-flex {
      width: 100%;
      margin-bottom: 12rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

@media (max-width: 480px) {
  .btn-sm {
    padding: 8rpx 14rpx;
    font-size: 20rpx;
    min-height: 40rpx;
  }
  
  .btn-md {
    padding: 12rpx 18rpx;
    font-size: 22rpx;
    min-height: 44rpx;
  }
  
  .btn-lg {
    padding: 14rpx 20rpx;
    font-size: 22rpx;
    min-height: 48rpx;
  }
  
  .btn-xl {
    padding: 14rpx 20rpx;
    font-size: 22rpx;
    min-height: 48rpx;
  }
  
  /* 超小屏幕下的特殊处理 */
  .button-row {
    flex-direction: column;
    gap: 12rpx;
    
    .btn-submit,
    .btn-reset {
      width: 100%;
      flex: none;
      margin: 0;
    }
  }
  
  .btn-group {
    gap: 8rpx;
    
    &.btn-group-responsive .btn-flex {
      margin-bottom: 8rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  /* 表格在小屏幕下的优化 */
  .table-cell {
    padding: 0 4rpx;
    font-size: 20rpx;
  }
  
  .header-cell {
    font-size: 20rpx;
    padding: 8rpx 4rpx;
  }
}

/* 按钮组容器 */
.btn-group {
  display: flex;
  gap: 16rpx;
  align-items: center;
  
  &.btn-group-responsive {
    flex-wrap: wrap;
  }
  
  &.btn-group-equal {
    .btn-flex {
      flex: 1;
    }
  }
}

/* 扫码输入框组样式 */
.scan-input-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 20rpx;
  
  @media (max-width: 480px) {
    gap: 15rpx;
    margin-top: 15rpx;
  }
}

.input-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  @media (max-width: 576px) {
    flex-direction: column;
    align-items: stretch;
    gap: 15rpx;
    
    .btn-flex {
      width: 100%;
    }
  }
  
  @media (max-width: 480px) {
    gap: 12rpx;
  }
}

/* 迁移旧的按钮样式到新的系统 */
.scan-btn {
  @extend .btn-base;
  @extend .btn-lg;
  @extend .btn-primary;
}

.material-input {
  flex: 1;
  height: 80rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #ffffff;
  transition: border-color 0.2s ease;
  /* H5环境下确保输入框可交互 */
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  /* 确保输入框可以接收所有事件 */
  pointer-events: auto !important;
  /* 确保输入框不是只读或禁用状态 */
  &:not([readonly]):not([disabled]) {
    cursor: text;
  }
  
  &:focus {
    border-color: #667eea;
    outline: none;
  }
  
  /* H5环境下的特殊处理 */
  /* #ifdef H5 */
  &:hover {
    border-color: #a0a0a0;
  }
  
  &:active {
    border-color: #667eea;
  }
  /* #endif */
  
  @media (max-width: 576px) {
    height: 64rpx;
    font-size: 24rpx;
  }
}

.search-btn {
  @extend .btn-base;
  @extend .btn-lg;
  @extend .btn-success;
}

/* 采购入库物料表格样式 */
.material-table-section {
  margin-top: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Tab选项卡样式 */
.tab-header {
  display: flex;
  background: #f8f9fa;
  border-bottom: 2rpx solid #e0e0e0;
}

.tab-btn {
  @extend .btn-base;
  flex: 1;
  padding: 24rpx 0;
  background: transparent;
  border: none;
  border-bottom: 4rpx solid transparent;
  font-size: 28rpx;
  color: #666;
  border-radius: 0;
  justify-content: center;
  
  &:hover {
    background: rgba(74, 144, 226, 0.1);
  }
  
  &.active {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
    background: #ffffff;
    font-weight: 600;
  }
  
  @media (max-width: 576px) {
    font-size: 24rpx;
    padding: 20rpx 0;
  }
  
  @media (max-width: 480px) {
    font-size: 22rpx;
    padding: 16rpx 0;
  }
}

.tab-content {
  padding: 20rpx 0;
}

.tab-content .table-header {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 8rpx 8rpx 0 0;
}

.tab-content .table-header .header-cell {
  color: #495057;
  font-weight: 600;
}

/* 选中待入库物料样式 */
.selected-material {
  background-color: #fff3cd;
  border-left: 4rpx solid #ffc107;
}

.selected-material:hover {
  background-color: #ffeaa7;
}

/* 空状态样式 */
.empty-tab-state {
  padding: 40rpx 20rpx;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin: 20rpx 0;
}

.empty-tab-state .empty-text {
  color: #6c757d;
  font-size: 28rpx;
  line-height: 1.5;
}

.remove-btn {
  @extend .btn-base;
  @extend .btn-md;
  flex: 1;
  height: 60rpx;
  margin: 0 8rpx;
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: #ffffff;
  border-radius: 8rpx;
  justify-content: center;
  
  &:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    transform: translateY(-1rpx);
    box-shadow: 0 4rpx 8rpx rgba(220, 53, 69, 0.25);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  }
  
  &:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
  }
  
  @media (max-width: 480px) {
    height: 48rpx;
    font-size: 20rpx;
  }
}

.remove-btn-small {
  @extend .btn-base;
  @extend .btn-sm;
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: #ffffff;
  border-radius: 6rpx;
  
  &:hover {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-1rpx);
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  }
}

.table-header {
  display: flex;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  padding: 20rpx 0;
}

.header-cell {
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 600;
}

.table-body {
  max-height: 400rpx;
  overflow-y: auto;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.table-row:hover {
  background-color: #f8f9fa;
}

.table-row.checked-row {
  background-color: #e8f5e8;
  border-left: 4rpx solid #4caf50;
}

.table-cell {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  color: #333;
  padding: 0 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-input {
  flex: 1;
  height: 60rpx;
  margin: 0 8rpx;
  padding: 0 12rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  text-align: center;
  background: #ffffff;
  transition: border-color 0.2s ease;
  
  &:focus {
    border-color: #4a90e2;
    outline: none;
  }
  
  &.error-input {
    border-color: #dc3545;
    background-color: #fff5f5;
    color: #dc3545;
    
    &:focus {
      border-color: #dc3545;
      box-shadow: 0 0 0 2rpx rgba(220, 53, 69, 0.25);
    }
  }
  
  @media (max-width: 576px) {
    height: 48rpx;
    font-size: 22rpx;
    margin: 0 6rpx;
    padding: 0 8rpx;
  }
  
  @media (max-width: 480px) {
    height: 44rpx;
    font-size: 20rpx;
  }
}

.add-btn {
  @extend .btn-base;
  @extend .btn-md;
  flex: 1;
  height: 60rpx;
  margin: 0 8rpx;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: #ffffff;
  justify-content: center;
  
  &:hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
    transform: translateY(-1rpx);
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  @media (max-width: 576px) {
    height: 52rpx;
    font-size: 22rpx;
  }
  
  @media (max-width: 480px) {
    height: 48rpx;
    font-size: 20rpx;
  }
}

.check-icon {
  color: #4caf50;
  font-size: 32rpx;
  font-weight: bold;
}

.uncheck-icon {
  color: #ccc;
  font-size: 28rpx;
}

/* 现代化输入框样式 */
.modern-input {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2rpx solid #e9ecef;
  border-radius: 20rpx;
  padding: 36rpx 24rpx;
  font-size: 32rpx;
  color: #2c3e50;
  font-weight: 500;
  line-height: 1.8;
  min-height: 108rpx;
  margin-bottom: 20rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4rpx 12rpx rgba(0, 0, 0, 0.06),
    inset 0 1rpx 3rpx rgba(255, 255, 255, 0.9);
  
  /* 让输入框内的文字垂直居中 */
  display: flex;
  align-items: center;
}

/* 单位选择器样式 */
.unit-picker {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8rpx;
}

.picker-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 8rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: #ffffff;
  font-size: 24rpx;
  color: #333;
  min-height: 60rpx;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.picker-view:hover {
  border-color: #4a90e2;
}

.picker-arrow {
  margin-left: 8rpx;
  font-size: 20rpx;
  color: #666;
}
/* 出库输入框浅绿背景 */
.bg-out-light {
  background-color: #e6f7e6 !important;
}

.input-field {
  width: 100%;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  
  &:focus {
    border-color: #007aff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
  }
  
  &:disabled {
    background-color: #f5f5f5;
    color: #999;
  }
}

.table-cell {
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

// 批号查询下拉列表样式
.batch-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.batch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: #f5f5f5;
  }

  &:active {
    background-color: #e6f7ff;
  }
}

.batch-no {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.batch-info {
  font-size: 12px;
  color: #666;
}

/* 炉批记录表格美化 */
.material-table-section {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  @media (max-width: 768px) {
    border-radius: 6px;
  }
  
  @media (max-width: 576px) {
    border-radius: 4px;
  }
}

/* 表格响应式处理 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  @media (max-width: 768px) {
    margin: 0 -10rpx;
    padding: 0 10rpx;
  }
  
  @media (max-width: 576px) {
    margin: 0 -8rpx;
    padding: 0 8rpx;
  }
}

/* 表格操作按钮在小屏幕下的优化 */
.table-actions {
  display: flex;
  gap: 8rpx;
  align-items: center;
  
  @media (max-width: 576px) {
    gap: 6rpx;
    flex-wrap: wrap;
  }
  
  @media (max-width: 480px) {
    gap: 4rpx;
  }
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .btn-base {
    min-height: 44px; /* iOS推荐的最小触摸目标 */
    min-width: 44px;
  }
  
  .btn-sm {
    min-height: 40px;
    min-width: 40px;
  }
  
  .btn-md {
    min-height: 44px;
    min-width: 44px;
  }
  
  .btn-lg {
    min-height: 48px;
    min-width: 48px;
  }
  
  .btn-xl {
    min-height: 52px;
    min-width: 52px;
  }
  
  /* 移动端按钮间距优化 */
  .btn-group {
    gap: 20rpx;
    
    @media (max-width: 576px) {
      gap: 16rpx;
    }
  }
  
  .button-row {
    gap: 24rpx;
    
    @media (max-width: 576px) {
      gap: 20rpx;
    }
  }
}

.table-header {
  display: flex;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.header-cell {
  flex: 1;
  padding: 12px 8px;
  font-weight: 600;
  color: #333;
  text-align: center;
  font-size: 14px;
}

.table-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;

  &:hover {
    background-color: #fafafa;
  }
}

.table-cell {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.empty-tip {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}

// 按钮容器样式
.button-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding: 0 16px;
}

.button-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap; /* 允许按钮换行 */
  padding: 0 10px; /* 添加左右内边距 */
  
  &:first-child {
    margin-bottom: 8px;
  }
  
  /* 自适应按钮容器 */
  .scan-btn.query-btn {
    flex: 1; /* 平均分配空间 */
    min-width: 80px; /* 最小宽度 */
    max-width: 120px; /* 最大宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 中等屏幕适配 */
    @media (max-width: 768px) {
      max-width: 100px;
      font-size: 24rpx !important;
    }
    
    /* 小屏幕适配 */
    @media (max-width: 480px) {
      flex: 1 1 calc(50% - 6px); /* 两列布局 */
      max-width: none;
      margin-bottom: 8px; /* 添加底部间距 */
    }
    
    /* 超小屏幕适配 */
    @media (max-width: 320px) {
      flex: 1 1 100%; /* 单列布局 */
      margin-bottom: 8px;
    }
  }
  
  /* 最后一个按钮去除底部间距 */
  .scan-btn.query-btn:last-child {
    @media (max-width: 480px) {
      margin-bottom: 0;
    }
  }
  
  /* 重置和提交按钮样式 - 同一行显示 */
  .btn-reset,
  .btn-submit {
    flex: 1;
    max-width: none;
    margin-bottom: 0 !important;
  }
}

.button-row button {
  min-width: 100px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.btn-reset {
  background: #f5f5f5;
  color: #666;
  
  &:hover:not(:disabled) {
    background: #e8e8e8;
  }
}

.btn-submit {
  background: #1890ff;
  color: white;
  
  &:hover:not(:disabled) {
    background: #40a9ff;
  }
  
  &:active:not(:disabled) {
    background: #096dd9;
  }
}

// 确保批号输入框容器相对定位
.form-group {
  position: relative;
}


// 扫码按钮样式
.scan-btn {
  padding: 6px 12px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #40a9ff;
  }

  &:active {
    background: #096dd9;
  }
}

.align-right {
  margin-left: auto;
  align-self: center;
}

// 确保表单项容器使用flex布局
.form-item {
  display: flex;
  align-items: center;
  gap: 8px;

  .form-label {
    flex-shrink: 0;
  }

  .process-display {
    flex: 1;
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .process-input {
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #495057;
    transition: all 0.3s ease;
    min-height: auto;
    line-height: 1.4;

    &:focus {
      border-color: #667eea;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
      outline: none;
      box-shadow: 
        0 6rpx 20rpx rgba(102, 126, 234, 0.2),
        inset 0 1rpx 3rpx rgba(255, 255, 255, 0.9);
      transform: translateY(-3rpx);
    }

    &.error-input {
      border-color: #ff4d4f;
      background: #fff5f5;
    }

    &::placeholder {
      color: #adb5bd;
    }
  }
}

// section-header 样式，确保扫码按钮右对齐
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 确保容器不会阻止输入事件 */
  pointer-events: none;
  
  .section-title {
    flex-shrink: 0;
    /* 允许标题接收鼠标事件 */
    pointer-events: auto;
  }
  
  .time-filter-buttons {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
    /* 允许按钮接收鼠标事件 */
    pointer-events: auto;
  }
  
  .scan-btn {
    flex-shrink: 0;
    /* 允许按钮接收鼠标事件 */
    pointer-events: auto;
  }
  
  /* 确保输入框可以接收所有事件 */
  .material-input {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

// 确保批号输入框容器相对定位
.form-group {
  position: relative;
}


// 输入框带按钮的容器样式
.input-with-button {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .modern-input {
    flex: 1;
  }
  
  .weight-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 12px;
    min-width: fit-content;
  }
}

// 确保批号输入框容器相对定位
.form-group {
  position: relative;
}


// 批号查询弹窗样式
.batch-query-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-content {
    background-color: #fff;
    border-radius: 24rpx;
    width: 95%;
    max-width: 1200rpx;
    max-height: 85%;
    display: flex;
    flex-direction: column;
    box-shadow: 
      0 20rpx 60rpx rgba(0, 0, 0, 0.15),
      0 8rpx 25rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    backdrop-filter: blur(20rpx);
    
    .modal-header {
      padding: 30rpx 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 24rpx 24rpx 0 0;
      position: relative;
      
      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: white;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
      }
      
      .close-btn {
        width: 56rpx;
        height: 56rpx;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        font-size: 36rpx;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        backdrop-filter: blur(10rpx);
        position: absolute;
        right: 40rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    
    .modal-body {
      flex: 1;
      padding: 30rpx;
      padding-bottom: 200rpx;
      overflow-y: auto;
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      position: relative;
      
      .query-form {
        display: flex;
        gap: 20rpx;
        margin-bottom: 60rpx;
        align-items: center;
        position: relative;
        
        .query-input {
          width: 300rpx;
          background: #f8f9fa;
          border: 2rpx solid #e9ecef;
          border-radius: 16rpx;
          padding: 24rpx 28rpx;
          font-size: 30rpx;
          color: #495057;
          transition: all 0.3s ease;
          height: 80rpx;
          box-sizing: border-box;

          &:focus {
            border-color: #667eea;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
            outline: none;
            box-shadow: 
              0 8rpx 32rpx rgba(102, 126, 234, 0.25),
              inset 0 2rpx 6rpx rgba(255, 255, 255, 0.9);
            transform: translateY(-4rpx);
          }

          &::placeholder {
            color: #adb5bd;
            font-size: 28rpx;
          }
        }
        
        .query-btn {
        padding: 16rpx 28rpx;
        border: 2rpx solid #667eea;
        background: white;
        color: #667eea;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12rpx;
        font-size: 26rpx;
        font-weight: 500;
        white-space: nowrap;
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        
        &.loading {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
      }
      
      .query-results {
        overflow-x: auto;
        
        .result-table {
          width: 100%;
          border-collapse: collapse;
          min-width: 800rpx;
          table-layout: fixed; /* 固定表格布局，确保列宽设置生效 */
          
          .table-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            
            th {
              padding: 24rpx 16rpx;
              text-align: left;
              font-weight: 600;
              color: white;
              border-bottom: none;
              font-size: 28rpx;
              position: relative;
              white-space: nowrap;
              
              /* 设置固定列宽 */
              &:nth-child(1) { width: 160rpx; } /* 批号 */
              &:nth-child(2) { width: 140rpx; } /* 炉号 */
              &:nth-child(3) { width: 160rpx; } /* 钢种 */
              &:nth-child(4) { width: 140rpx; } /* 规格 */
              &:nth-child(5) { width: 140rpx; } /* 重量 */
              &:nth-child(6) { width: 120rpx; } /* 操作 */
              
              &:not(:last-child)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 2rpx;
                height: 60%;
                background: rgba(255, 255, 255, 0.2);
              }
              
              &:last-child {
                position: sticky;
                right: 0;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                z-index: 10;
                border-left: 2rpx solid rgba(255, 255, 255, 0.2);
              }
            }
          }
          
          .table-body {
            .table-row {
              background: white;
              transition: all 0.3s ease;
              
              &:nth-child(even) {
                background: #f8f9fa;
              }
              
              &:hover {
                background: linear-gradient(135deg, #f0f2ff 0%, #e8ebff 100%);
                transform: translateX(4rpx);
              }
              
              &:active {
                background: linear-gradient(135deg, #e3e7ff 0%, #d0d4ff 100%);
                transform: translateX(8rpx);
              }
              
              td {
                padding: 24rpx 16rpx;
                border-bottom: 2rpx solid #f0f0f0;
                font-size: 26rpx;
                color: #495057;
                font-weight: 500;
                white-space: nowrap;
                
                /* 设置固定列宽 */
                &:nth-child(1) { width: 160rpx; } /* 批号 */
                &:nth-child(2) { width: 140rpx; } /* 炉号 */
                &:nth-child(3) { width: 160rpx; } /* 钢种 */
                &:nth-child(4) { width: 140rpx; } /* 规格 */
                &:nth-child(5) { width: 140rpx; } /* 重量 */
                &:last-child { width: 120rpx; } /* 操作 */
                
                &:last-child {
                position: sticky;
                right: 0;
                background: inherit;
                z-index: 5;
                border-left: 2rpx solid #f0f0f0;
                text-align: right;
                padding-right: 24rpx;
                
                .btn.btn-primary {
                  padding: 12rpx 20rpx;
                  border-radius: 10rpx;
                  font-size: 22rpx;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  border: none;
                  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
                  color: white;
                  cursor: pointer;
                  transition: all 0.3s ease;
                  font-weight: 600;
                  white-space: nowrap;
                  
                  &:active {
                    background: linear-gradient(135deg, #5a6fd8 0%, #6a42a0 100%);
                    transform: translateY(-2rpx);
                    box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
                  }
                  
                  &:hover {
                    background: linear-gradient(135deg, #768df5 0%, #8765c0 100%);
                    transform: translateY(-2rpx);
                    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.5);
                  }
                }
              }
              }
            }
            
            .empty-row {
              text-align: center;
              color: #6c757d;
              padding: 60rpx 40rpx;
              font-size: 28rpx;
              background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
              border-radius: 16rpx;
              margin: 20rpx 0;
            }
          }
        }
      }
    }
    
    .modal-footer {
      padding: 30rpx 40rpx;
      border-top: 2rpx solid #f0f0f0;
      display: flex;
      justify-content: flex-end;
      gap: 20rpx;
      position: absolute;
      bottom: 60rpx;
      right: 40rpx;
      background: transparent;
      z-index: 10;
      
      .btn {
        padding: 20rpx 32rpx;
        border: none;
        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        transition: all 0.3s ease;
        font-size: 28rpx;
        font-weight: 500;
        white-space: nowrap;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        
        &.btn-primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          
          &:active {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a42a0 100%);
            transform: translateY(-2rpx);
            box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
          }
          
          &:hover {
            background: linear-gradient(135deg, #768df5 0%, #8765c0 100%);
            transform: translateY(-2rpx);
            box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.5);
          }
        }
        
        &:active {
          background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
          transform: translateY(-2rpx);
          box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
        }
        
        &:hover {
          background: linear-gradient(135deg, #7d8690 0%, #565e66 100%);
          transform: translateY(-2rpx);
          box-shadow: 0 8rpx 24rpx rgba(0, 123, 255, 0.3);
        }
      }
    }
  }
}

// 查询按钮样式
.query-btn {
  padding: 16rpx 24rpx !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 12rpx !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  font-size: 26rpx !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3) !important;
  margin-left: 10px !important;
  min-height: 60rpx !important;
  line-height: 1.2 !important;
  
  /* 自适应字体大小 */
  @media (max-width: 480px) {
    font-size: 24rpx !important;
    padding: 14rpx 20rpx !important;
  }
  
  @media (max-width: 320px) {
    font-size: 22rpx !important;
    padding: 12rpx 16rpx !important;
  }
  
  &:active {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a42a0 100%) !important;
    transform: translateY(-2rpx) !important;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4) !important;
  }
  
  &:hover {
    background: linear-gradient(135deg, #768df5 0%, #8765c0 100%) !important;
    transform: translateY(-2rpx) !important;
    box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.5) !important;
  }
}



// 批量操作按钮样式
.batch-actions {
  display: flex;
  gap: 10px;
  margin-left: 10px;
  
  .batch-btn {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    
    &.primary {
      background: #007aff;
      color: #fff;
      border-color: #007aff;
    }
    
    &:disabled {
      background: #f5f5f5;
      color: #ccc;
      border-color: #e0e0e0;
    }
  }
}


// 选择框样式
.select-checkbox {
  transform: scale(0.8);
}

// 表格单元格样式调整
.table-cell {
  min-width: 80px;
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  word-break: break-all;
}

// 表头样式调整
.header-cell {
  min-width: 80px;
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: bold;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

/* 输入法开关样式 - uniapp 主流滑动开关 */
.input-switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 0;
  margin: 0rpx 0;
}

.switch-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-right: 20rpx;
  flex: 1;
}

/* 现代滑动开关样式 */
.custom-switch-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 10rpx;
  margin: -10rpx;
}

/* 自定义滑动开关样式 - iOS风格 */
.custom-switch {
  position: relative;
  width: 100rpx;
  height: 56rpx;
  background-color: #e5e5e5;
  border-radius: 28rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

  /* 悬停效果 */
  &:hover {
    transform: scale(1.02);
  }

  /* 点击效果 */
  &:active {
    transform: scale(0.98);
  }
}

/* 开启状态样式 */
.custom-switch-active {
  background-color: #2979ff;
  box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 滑块手柄样式 */
.custom-switch-handle {
  position: absolute;
  top: 4rpx;
  left: 4rpx;
  width: 48rpx;
  height: 48rpx;
  background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 2;

  /* 手柄悬停效果 */
  &:hover {
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.2);
  }
}

/* 手柄激活状态 */
.custom-switch-handle-active {
  transform: translateX(44rpx);
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
}

/* 现代滑动开关样式（保留原样式作为备用） */
.modern-switch {
  transform: scale(1.1);
  transition: all 0.3s ease;

  /* 悬停效果 */
  &:hover {
    transform: scale(1.15);
  }

  /* 点击效果 */
  &:active {
    transform: scale(1.05);
  }

  /* 开启状态样式 */
  &.uni-switch-input-checked {
    background-color: #2979ff !important;
    border-color: #2979ff !important;
  }

  /* 关闭状态样式 */
  &:not(.uni-switch-input-checked) {
    background-color: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
  }

  /* 滑块样式 */
  &::after {
    background-color: #ffffff !important;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
  }
}

/* 扫码枪隐藏输入框样式 */
.scan-gun-input {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

// 自定义checkbox样式
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .checkbox-icon {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    &.checkbox-checked {
      background-color: #007aff;
      border-color: #007aff;

      .check-mark {
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        line-height: 1;
      }
    }
  }
}

// 表格单元格中的自定义checkbox样式
.table-cell {
  .custom-checkbox {
    .checkbox-icon {
      width: 16px;
      height: 16px;

      &.checkbox-checked {
        .check-mark {
          font-size: 10px;
        }
      }
    }
  }
}

// 计量单数量列样式 - 浅黄色背景
.quantity-cell {
  background-color: #fffacd !important; // 浅黄色背景

  .quantity-input {
    background-color: transparent; // 输入框背景透明，显示单元格背景色
    border: 1px solid #ffd700; // 金色边框
    border-radius: 4px;
    padding: 4px 8px;
    text-align: center;
    font-weight: 500;

    &:focus {
      border-color: #ffa500; // 橙色边框当获得焦点时
      box-shadow: 0 0 4px rgba(255, 165, 0, 0.3); // 轻微的橙色阴影
    }

    &:disabled {
      background-color: #e9ecef !important;
      color: #6c757d !important;
      border-color: #ced4da !important;
      opacity: 0.7;
      cursor: not-allowed;
    }
  }
}

// 采购入库和人工入库模式下的数量输入框样式
.material-table-section {
  .table-cell {
    &.quantity-cell {
      background-color: #fffacd !important;
      padding: 8px 4px; // 增加单元格内边距

      .quantity-input.large-input {
        background-color: transparent;
        border: 1px solid #ffd700;
        border-radius: 4px;
        padding: 8px 10px; // 增加输入框内边距
        text-align: center;
        font-weight: 500;
        min-height: 40px; // 增加最小高度
        font-size: 14px; // 增加字体大小

        &:focus {
          border-color: #ffa500;
          box-shadow: 0 0 4px rgba(255, 165, 0, 0.3);
        }

        &:disabled {
          background-color: #e9ecef !important;
          color: #6c757d !important;
          border-color: #ced4da !important;
          opacity: 0.7;
          cursor: not-allowed;
        }
      }
    }
  }
}

// 横向滚动提示样式 - 使用现有按钮设计模式
.scroll-hint {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
  padding: 12rpx 20rpx;
  border-radius: 25rpx;
  font-size: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.3);
  z-index: 100;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
  border: none;
  cursor: pointer;

  &.scroll-hint-hidden {
    opacity: 0;
    transform: translateY(20rpx);
    pointer-events: none;
  }

  .scroll-hint-text {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-weight: 500;
    
    &::before {
      content: "→";
      font-size: 28rpx;
      animation: bounceRight 1.5s infinite;
    }
  }

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.4);
  }

  &:active {
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes bounceRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8rpx); }
}

// 通用表格样式（用于提纯作业等页面）
.table-container {
  margin: 20rpx 0;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

  .table-header {
    padding: 24rpx 32rpx;
    background: #f5f5f5;
    border-bottom: 2rpx solid #e0e0e0;

    .table-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .table {
    width: 100%;

    .table-row {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      &.table-header-row {
        background: #fafafa;
        font-weight: 600;
      }

      .table-cell {
        flex: 1;
        padding: 24rpx 32rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;

        &.header-cell {
          color: #666;
          font-weight: 600;
        }
      }
    }
  }
}

// TAB页样式（用于提纯作业等页面）
.tab-container {
  display: flex;
  background: #f5f5f5;
  border-radius: 16rpx;
  margin: 20rpx 0;
  overflow: hidden;

  .tab-item {
    flex: 1;
    padding: 24rpx 32rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      background: #007aff;
      color: #fff;
    }
    
    &:hover {
      background: #e0e0e0;
      
      &.active {
        background: #007aff;
      }
    }
  }
}

.tab-content {
  padding: 20rpx 0;
}

// 日期筛选按钮样式
.date-filter-container {
  display: flex;
  gap: 16rpx;
  margin-bottom: 30rpx;

  .date-filter-btn {
    flex: 1;
    padding: 16rpx 24rpx;
    background: #f5f5f5;
    border: 2rpx solid #ddd;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      background: #007aff;
      color: #fff;
      border-color: #007aff;
    }
    
    &:hover {
      background: #e0e0e0;
      
      &.active {
        background: #007aff;
      }
    }
  }
}

// 计划表格样式
.plan-table-container {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;

  .plan-table-header {
    display: flex;
    background: #f5f5f5;
    border-bottom: 2rpx solid #e0e0e0;
    padding: 24rpx 32rpx;
  }

  .plan-table-body {
    max-height: 600rpx;
    overflow-y: auto;

    .plan-table-row {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.3s ease;
      
      &:hover {
        background: #f9f9f9;
      }
      
      &.selected {
        background: #e6f7ff;
        border-left: 6rpx solid #007aff;
      }
      
      &:last-child {
        border-bottom: none;
      }

      .table-cell {
        flex: 1;
        padding: 24rpx 32rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

// 选择按钮样式
.btn-select {
  padding: 12rpx 24rpx;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #0056b3;
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  }
  
  &:active {
    transform: translateY(0);
  }
}
